<template>
	    <div class="approver_wrap"> 
			 <div class="title">
			    <span class="left">条件1</span>
				<span class="right">优先级1</span>
			 </div>
			 <div class="content">
				<span v-if="props.customAttr.users">{{props.customAttr.users.join(',')}}</span> 
				<span v-else>请设置条件</span>
				 </div>
		</div>

</template>

<script setup lang="ts"> 
import { reactive, computed, ref, getCurrentInstance ,onMounted, watch, onUnmounted ,createVNode,toRaw} from 'vue'


 
 
 const props = defineProps<{ 
   customAttr: any,
   type?:string,
   //submitCallBack: () => void,
 }>();
 
 
 //  const emit = defineEmits(['closeModal']) 
 // const closeModal  = ()=>{ 
 //   emit('closeModal',false)  
 // } 
 
 
 

const init = () => { 
	
  // watch(searchValue, value => {
     
  // }); 
  
   
}


onMounted(() => {
  init();  
})

onUnmounted(()=> {
 
})


</script>


<style lang="less" scoped>
.approver_wrap{
	margin: 10px;
   width: 220px;
   height: 80px; 
   padding: 10px;
   background: #FFFFFF;
  box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.15);
   border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.15); 
   &:hover{
		border: 1px solid #005AEA; 
	   box-shadow:  0px 0px 5px 3px  rgba(0,90,234,0.3);
	   
   }
   &.red{
		border: 1px solid #FF4D4F; 
   }
   
   .title{
	   overflow: hidden;
	   line-height: 16px; 
	   margin-top: 3px;
	  .left{ 
		  font-weight: 600;
		  padding-left: 6px;
		  float: left;
		  border-left: 3px solid #005AEA;
		  color: #005AEA;
	  }
	  .right{
			float: right;
			color: rgba(0,0,0,0.45);
	  }
   }
   .content{
	   margin-top: 15px;
		 
   }
   
}

.lf-node-selected{
	.approver_wrap{
		border: 1px solid #005AEA; 
		 box-shadow:  0px 0px 5px 3px  rgba(0,90,234,0.3);
	}
}


</style>
